NavBar.render - Code Metrics - Inspection of "remove layout component" - henrikfredriksson/algorithm-visualizer - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( a4af30...332d7f )

by Henrik

created 2019-07-24 18:05 UTC

NavBar.render B

↳ Parent: NavBar

Complexity

Conditions

Size

Total Lines	51
Code Lines	40

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	40
dl	0
loc	51
rs	8.92
c	0
b	0
f	0
cc	2

How to fix Long Method

import React, { Component } from 'react'
import Dock from 'react-dock'
import { Link } from 'react-router-dom'
import LoadingBar from 'react-top-loading-bar'

import './navbar.css'


export default class NavBar extends Component {
  constructor () {
    super()

    this.state = {
      isVisible: true,
      isLeavingPage: false
    }
  }

  componentDidMount () {
    this.setState({
      isVisible: false
    })

    this.listener = window.addEventListener('keydown', e => {
      if (e.key === 'F1' || e.key === ' ') {
        this.setState({
          isVisible: !this.state.isVisible
        })
      }
    })
  }

  componentWillUnmount () {
    window.removeEventListener('keydown', this.listener)
  }

  render () {
    return (
      <div>
        <Dock
          fluid
          position='top'
          size={0.1}
          isVisible={this.state.isVisible}
          dockStyle={this.style}
          dim='transparent'
        >
          <div
            id='menuContent'
            onMouseLeave={() => {
              if (!this.state.isLeavingPage) {
                this.setState({
                  isVisible: false
                })
              }
            }}
          >
            <ul>
              <li>
                <Link
                  onClick={() => {
                    this.setState({
                      isLeavingPage: true
                    })
                  }}
                  to='/insertion'
                >
                  Insertion sort
                </Link>
              </li>
              <li>
                <Link
                  onClick={() => {
                    this.setState({
                      isLeavingPage: true
                    })
                  }}
                  to='/bubble'
                >
                  Bubble Sort
                </Link>
              </li>
            </ul>
          </div>
        </Dock>
      </div>
    )
  }
}


1			import React, { Component } from 'react'
2			import Dock from 'react-dock'
3			import { Link } from 'react-router-dom'
4			import LoadingBar from 'react-top-loading-bar'
5
6			import './navbar.css'
7
8
9			export default class NavBar extends Component {
10			constructor () {
11			super()
12
13			this.state = {
14			isVisible: true,
15			isLeavingPage: false
16			}
17			}
18
19			componentDidMount () {
20			this.setState({
21			isVisible: false
22			})
23
24			this.listener = window.addEventListener('keydown', e => {
25			if (e.key === 'F1' \|\| e.key === ' ') {
26			this.setState({
27			isVisible: !this.state.isVisible
28			})
29			}
30			})
31			}
32
33			componentWillUnmount () {
34			window.removeEventListener('keydown', this.listener)
35			}
36
37			render () {
38			return (
39			<div>
40			<Dock
41			fluid
42			position='top'
43			size={0.1}
44			isVisible={this.state.isVisible}
45			dockStyle={this.style}
46			dim='transparent'
47			>
48			<div
49			id='menuContent'
50			onMouseLeave={() => {
51			if (!this.state.isLeavingPage) {
52			this.setState({
53			isVisible: false
54			})
55			}
56			}}
57			>
58			<ul>
59			<li>
60			<Link
61			onClick={() => {
62			this.setState({
63			isLeavingPage: true
64			})
65			}}
66			to='/insertion'
67			>
68			Insertion sort
69			</Link>
70			</li>
71			<li>
72			<Link
73			onClick={() => {
74			this.setState({
75			isLeavingPage: true
76			})
77			}}
78			to='/bubble'
79			>
80			Bubble Sort
81			</Link>
82			</li>
83			</ul>
84			</div>
85			</Dock>
86			</div>
87			)
88			}
89			}
90

henrikfredriksson / algorithm-visualizer

Push — master ( a4af30...332d7f )

NavBar.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like